<template>
	<div class="login_pannel">
		<!--
        	作者：846966684@qq.com
        	时间：2017-02-22
        	描述：已登录
        -->
		<div class="content login_on_panel" v-if="isLogged">
			<h3>
				{{getUser.customerInfo.userName | encrypt('username')}}
			</h3>
			<div class="userLevel">
				<span class="c1"></span>
				<span class="vip"></span>
			</div>
			<div class="userProperty">
				<h3>总资产</h3>
				<div class="body">
					<span class="cny"></span>
					<span class="amount">
						888,888,89
					</span>
					<span class="eyeShow"></span>
				</div>
			</div>
			<div class="buttonWrapper">
				<a>
					<button>快速交易</button>
				</a>
			</div>
			<div class="otherLink">
				<ul>
					<li>
						<a>充值</a>
					</li>
					<li class="tx">
						<a>提现</a>
					</li>
					<li>
						<a>资产可视化</a>
					</li>
				</ul>
			</div>
			<div class="security">
				<a class="security_iofo">
					您的安全级别：
					<span class="security_type">
						中
					</span>
				</a>
				<a class="security_add">
					立即提高安全级别
				</a>
			</div>
		</div>
		<!--
        	作者：846966684@qq.com
        	时间：2017-02-22
        	描述：未登录
        -->
		<div class="content login_out_panel" v-else>
			<h3>
				登录链行
			</h3>
			<div class="form login-form">
				<div class="input-icon">
					<i class="fa fa-user"></i>
					<input v-model="login_p.username" type="text" placeholder="请输入邮箱或手机号" />
				</div>
				<div class="input-icon">
					<i class="fa fa-lock"></i>
					<input v-model="login_p.password" type="password" placeholder="请输入密码" />
				</div>
				<div class="input-icon">
					<input class="checkbox" type="checkbox" />
					<span class="left">记住此账户名</span>
					<span class="right">
						<router-link to='/findpassword/verifyaccount'>
							忘记密码?
						</router-link>
					</span>
				</div>
				<div class="input-icon">
					<span class="left">
							<button v-on:click="login()">登录</button>
						</span>
					<span class="right">
						<router-link to='/reg/phone'>
							<button>注册</button>
							</router-link>
						</span>
				</div>
				<div class="input-icon">
					<div class="login_container">
						<a class="qq_login">
							QQ登录
						</a>
						<a v-on:click="openwx()" class="wx_login">
							微信登录
						</a>
						<a class="wb_login">
							微博登录
						</a>
						<wx ref="wxref"></wx>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import wx from './pannel/wx'
	export default {
		name: 'login_pannel',
		computed: {
			isLogged() {
				return this.$store.getters.isLogged;
			},
			getUser() {
				return this.$store.getters.getUser;
			},
			isPath() {
				return this.$route.path;
			},
		},
		data() {
			return {
				title: "宝宝是登录组件",
				login_p: {
					username: '17098075514',
					password: 'pc257116'
				}
			}
		},
		components: {
			wx,
		}, //这里注册
		methods: {
			login: function() {
				var that = this;
				this.lh_http('post', "login", this.login_p).done(function(res) {
					if(res.status) {
						that.$store.commit('logon', res.data)
						console.log(that.getUser)
						that.$router.push({
							path: '/'
						})
					} else {
						alert(res.data);
					}
				})
			},
			openwx: function() {
				console.log(this.$refs.wxref)
				this.$refs.wxref.aaa();
			}
		},
		mounted() {
			var that = this;

			//			第三方登录	
			//			this.lh_http('post', "thirdLogin", {
			//				state: '1111',
			//				code: '222'
			//			}).done(function(res) {
			//				
			//			console.log(res)
			//					if(res.status) {
			//						that.$store.commit('logon', res.data)
			//						console.log(that.getUser)
			//						that.$router.push({
			//							path: '/'
			//						})
			//				  }
			//			 })

		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.login_pannel {
		height: 401px;
		width: 357px;
		background-color: rgba(40, 44, 50, .73);
		padding: 11px;
		z-index: 9;
		a {
			color: white;
		}
		.content {
			height: 100%;
			width: 100%;
			background: rgba(40, 44, 50, .87);
			h3 {
				font-size: 22px;
				color: #fff;
				height: 30px;
				line-height: 30px;
				padding-top: 28px;
				padding-bottom: 28px;
				padding-left: 20px;
				font-weight: 400;
				text-align: left;
			}
		}
		.login_out_panel {
			.form {
				/*margin-top: 20px;*/
				.input-icon {
					padding: 0px 10px 10px 10px;
					overflow: auto;
					input {
						width: 100%;
						height: 45px;
						border-radius: 2px;
						padding: 7px 30px;
						font-size: 14px;
					}
					i {
						color: #ececec;
						font-size: 22px;
						left: 6px;
						float: left;
						top: 33px;
						position: relative;
						text-align: left;
						width: 20px;
						z-index: 1;
					}
					.fa {
						height: 20px;
					}
					.fa-user {
						background: url(../../../../static/imgs/fa-user.png);
						background-repeat:no-repeat;
						background-size: 20px 20px;
					}
					.fa-lock {
						background: url(../../../../static/imgs/fa-lock.png);
						background-repeat:no-repeat;
						background-size: 18px 20px;
					}
					&:hover .fa-user {
						background: url(../../../../static/imgs/fa-user-b.png);
						background-repeat:no-repeat;
						background-size: 20px 20px;
					}
					&:hover .fa-lock {
						background: url(../../../../static/imgs/fa-lock-b.png);
						background-repeat:no-repeat;
						background-size: 18px 20px;
					}
					.checkbox {
						width: 20px;
						float: left;
					}
					.left {
						float: left;
						button {
							background-color: #0093f1;
							color: #fff;
							width: 100%;
							width: 225px;
							height: 46px;
							border-radius: 2px;
							font-size: 16px;
						}
					}
					.right {
						float: right;
						button {
							background-color: #f06103;
							color: #fff;
							width: 100%;
							width: 80px;
							height: 46px;
							border-radius: 2px;
							font-size: 16px;
						}
					}
					span {
						height: 43px;
						line-height: 43px;
						color: white;
						font-size: 14px;
					}
					.login_container {
						margin-bottom: 0;
						position: absolute;
						bottom: 25px;
						width: 357px;
						left: 0;
						font-size: 14px;
						color: white;
						.qq_login {
							color: #fff;
							display: inline-block;
							font-size: 14px;
							height: 16px;
							line-height: 16px;
							width: 90px;
							cursor: pointer;
						}
						.wx_login {
							color: #fff;
							display: inline-block;
							font-size: 14px;
							height: 16px;
							line-height: 16px;
							width: 90px;
							border-left: 1px solid #fff;
							cursor: pointer;
						}
						.wb_login {
							display: inline-block;
							color: #fff;
							font-size: 14px;
							height: 16px;
							line-height: 16px;
							width: 90px;
							border-left: 1px solid #fff;
							cursor: pointer;
						}
					}
				}
			}
		}
		.login_on_panel {
			.userLevel {
				margin: 0 auto;
				height: 50px;
				padding-top: 19px;
				border-bottom: 1px solid #0093F1;
				margin: 0 20px;
				span {
					width: 20px;
					height: 20px;
					display: block;
					background-size: cover;
				}
				.vip {
					float: left;
					background-image: url(../../../../static/imgs/V1.png);
					margin-left: 10px;
				}
				.c1 {
					float: left;
					background-image: url(../../../../static/imgs/C1.png);
					margin-left: 2px;
				}
				.c2 {
					float: left;
					margin-left: 2px;
					background-image: url(../../../../static/imgs/C2.png);
				}
			}
			.userProperty {
				margin: 0 auto;
				height: 120px;
				padding: 19px 20px 0;
				h3 {
					font-size: 16px;
					color: #D0D0D0;
					padding: 0;
					margin: 0;
				}
				span {
					width: 11px;
					height: 12px;
					display: block;
					background-size: contain;
					background-repeat: no-repeat;
				}
				.eyeShow {
					background-image: url(../../../static/imgs/eye_show.png);
					display: inline-block;
					width: 30px;
					height: 20px;
					cursor: pointer;
				}
				.eyeHide {
					background-image: url(../../../static/imgs/eye_hide.png);
					display: inline-block;
					width: 30px;
					height: 20px;
					cursor: pointer;
				}
				.cny {
					background-image: url(../../../static/imgs/cny.png);
					display: inline-block;
					width: 20px;
				}
				.amount {
					color: #fff;
					display: inline-block;
					font-size: 32px;
					position: relative;
					width: 235px;
					height: 30px;
					line-height: 30px;
				}
				.amount_hide {
					color: #fff;
					display: inline-block;
					font-size: 42px;
					position: relative;
					width: 235px;
					height: 30px;
					line-height: 30px;
					.star {
						top: 16px;
						position: absolute;
					}
				}
				.body {
					height: 65px;
					line-height: 65px;
					text-align: left;
				}
			}
			.buttonWrapper {
				button {
					width: 300px;
					height: 45px;
					background: #0093F1;
					color: white;
					font-size: 16px;
				}
			}
			.otherLink {
				ul {
					padding: 30px 0;
					li {
						padding: 0 20px;
						display: -webkit-inline-box;
						font-size: 14px;
						height: 15px;
						color: white;
						line-height: 15px;
					}
					.tx {
						border-left: 1px solid white;
						border-right: 1px solid white;
					}
				}
			}
			.security {
				padding: 0px 20px;
				color: white;
				.security_iofo {
					float: left;
					.security_type {
						color: #FF4FA1;
					}
				}
				.security_add {
					float: right;
				}
			}
		}
	}
</style>